<!--
 * @Author: zqx me_zqx@163.com
 * @Date: 2025-04-09 11:36:55
 * @LastEditors: zqx me_zqx@163.com
 * @LastEditTime: 2025-05-29 11:35:25
 * @FilePath: /XMate-h5/src/views/badge/components/deviceInfoView.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="badge-container flex flex-col justify-between h-full text-gray-600 text-sm">
    <div class="flex flex-col p-4">
      <div class="py-6 relative">
        <DeviceInfo v-if="deviceInfo" :deviceInfo="deviceInfo" />
      </div>

      <div class="bg-[#F9FAFC] p-5 rounded-[8px]">
        <h5 class="text-[14px] font-bold text-[#262626] mb-1">温馨提示</h5>
        <p class="text-[14px] text-[#757575]">每位用户仅可绑定一个工牌设备</p>
      </div>
    </div>

    <div
      class="flex flex-row items-center justify-between px-4 pb-12 gap-4 pt-5 relative"
    >
      <div class="absolute top-0 left-0 right-0 h-[0.5px] bg-[#e9e9e9b1]"></div>

      <van-button
        class="w-[100px]"
        plain
        size="large"
        color="red"
        @click="() => emits('clickUnbindBtn')"
        >解绑设备</van-button
      >

      <van-button
        class="w-[100px]"
        size="large"
        color="#436BFF"
        @click="() => emits('clickChangeBtn')"
        >更换设备</van-button
      >
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, PropType, computed } from "vue";
import { BadgeDeviceInfo } from "@/services/badge/type";
import BatteryView from "./batteryView.vue";
import DeviceInfo from "./deviceInfo.vue";

const emits = defineEmits(["clickChangeBtn", "clickUnbindBtn"]);

const props = defineProps({
  deviceCode: {
    type: String,
    default: "",
  },
  deviceInfo: {
    type: Object as PropType<BadgeDeviceInfo | null>,
    default: () => ({}),
  },
});

const batteryIcon = computed(() => {
  const level = props.deviceInfo?.batteryPer || 0;
  if (level === 100) return "battery-full";
  if (level >= 90) return "battery-6";
  if (level >= 70) return "battery-5";
  if (level >= 50) return "battery-4";
  if (level >= 30) return "battery-3";
  if (level >= 10) return "battery-2";
  if (level > 0) return "battery-1";
  return "battery-0";
});

const batteryColor = computed(() => {
  const level = props.deviceInfo?.batteryPer || 0;
  if (level >= 50) return "#4CAF50"; // 绿色
  if (level >= 20) return "#FFA000"; // 橙色
  return "#E53935"; // 红色
});
</script>

<style scoped lang="less">
.badge-container {
  --van-button-large-height: 44px;
}
</style>
